<template>
    <div :class="data.isAdd?'':'chatList'">
    <div class="list-wrapper flex">
        <div class="list-left center">
           <van-image
            width="1.5rem"
            height="1.5rem"
            radius=".2rem"
            fit="cover"
            :src="data.avatar"
            />
            <tip-badge :badgeStyle='badgeStyle' :isBadge="true" v-if="data.noReadCount!==0">{{data.noReadCount}}</tip-badge>
        </div>
        <div class="list-center f-col f-1">
            <div :class="data.isAdd?'center-top-add':'center-top-chat'">
                <span>{{data.name}}</span>
                <van-icon name="friends-o" v-if="data.isGroup" />
            </div>
            <div class="center-bottom">{{data.lastMsg}}</div>
            <div :class="data.noLine?'':'line'"></div>
        </div>
        <div class="list-right f-col" v-if="!data.isAdd">
            <div class="right-top">{{showTime}}</div>
            <!-- 消息免打扰图标 -->
            <div class="right-bottom" v-if="false">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jingyin"></use>
                </svg>
            </div>
        </div>
        <div class="list-right" v-else>
           <button class="accept" v-if="data.status==1" @click="addFriend">接受</button>
            <span class="added" v-else>已添加</span>
        </div>
    </div>
    </div>
</template>
<script>
import tipBadge from '../common/tipBadge';
import time from '../../../api/libs/time';
export default {
    props:{
        data:Object
    },
    data(){
        return{
            badgeStyle:'right: -.4rem;top: -.2rem;',
            docStyle:'right: -.1rem;top: -.1rem;'
        }
    },
    components:{
        tipBadge
    },
    computed:{
      showTime(){
        return time.getTimeByShort(this.data.time)
      }
    },
    methods:{
        toChatDetail(e){
            console.log(e)
        },
        addFriend(){
            this.$emit('addFriend',this.data)
        }
    }
}
</script>
<style scoped>
 .chatList:active{
        background-color: rgba(228,228,228,.5);
    }
   .list-wrapper{
       padding: .4rem;
       box-sizing: border-box;
   }
   .list-left{
       position: relative;
   }
   .list-left .van-image{
       display: inline-block; 
       vertical-align: middle;
   }
   .list-center{
       padding-left: .6rem;
       padding-top: .15rem;
       position: relative;
       width: 0;
   }
   .center-top-chat{
       font-size: .6rem;
       margin-bottom: .2rem;
   }
   .center-top-add{
       font-size: .6rem;
   }
   .center-bottom{
       font-size: .4rem;
       color: #B2B2B2;
       width: 100%; 
       display: block; 
       overflow: hidden; 
       text-overflow:ellipsis; 
       white-space: nowrap;
   }
   .list-right{
       max-width: 4rem;
       text-align: right;
   }
   .right-top{
       font-size: .4rem;
       color: #B2B2B2;
   }
   .right-bottom .icon{
       font-size: .6rem;
       color: #B2B2B2;
   }
    .line{
    position: absolute;
    width: 12.7rem;
    height: 0;
    border-top: .05rem solid rgba(228,228,228,.5);
    bottom: -.3rem;
}
    .accept{
        position: relative;
        top: .2rem;
        font-size: .6rem;
        background-color: #1DA81E;
        color: #fff;
        padding: .3rem .4rem;
        border-radius: .2rem;
    }
    .accept:active{
        background-color: #009900;
    }
    .added{
        font-size: .6rem;
        color: #A6A4A7;
    }
</style>